/**
 * Created by luojie on 2018/3/13.
 */

import "../css/layout.scss";

const footerBg1 = require("../images/footer-bg1.png");
const memberIcon = require("../images/member-icon.png");
const buyIcon = require("../images/buy-icon.png");
const prizeIcon = require("../images/prize-icon.png");
const siteIcon = require("../images/site-icon.png");

const activeMemberIcon = require("../images/member-active.png");
const activeBuy = require("../images/active-buy.png");
const activePrize = require("../images/prize-active.png");
const activeSite = require("../images/active-site.png");

export default class Layout extends React.PureComponent{
	constructor(props){
		super(props);

		this.footerList = [
			{name:"我的会员",img:memberIcon,path:"/myMember",active:"myMember",activeIcon:activeMemberIcon},
			{name:"购买课程",img:buyIcon,path:"/courseList",active:"buyCourse",activeIcon:activeBuy},
			{name:"抽奖",img:"",path:"/luckDraw",active:"prize"},
			{name:"我的奖品",img:prizeIcon,path:"/myGifts",active:"myGifts",activeIcon:activePrize},
			{name:"授课地址",img:siteIcon,path:"/courseSite",active:"courseSite",activeIcon:activeSite},
		]
		this.state = {
			noBg:false
		}
	}
	componentWillReceiveProps(nextProps){
		let {noBg} = this.props
		if(this.props.noBg !== nextProps.noBg){
			this.setState({
				noBg:nextProps.noBg
			})
		}
	}
	static defaultProps = {
		active:"myMember"
	};
	navigate(path){
		this.props.history.push(path);
	}
	render(){
		let {active} = this.props;
		const {noBg} = this.state
		return(
			<div className="layout">
				<div className="layout-container">
					<div className="layout-content">
						{this.props.children}
					</div>
					<div className="layout-footer">
						{/* {
							noBg?null:(<img className="footer-bg1" src = {footerBg1} alt=""/>)
						} */}
						{
							this.footerList.map((item,index)=>{
								if(item.name === "抽奖"){
									return(
										<div
											key = {`footer${index}`}
											onClick = {this.navigate.bind(this,item.path)}
											className="footer-row">
											<button className={active === item.active?"layout-prize-btn prize-active":"layout-prize-btn"}>
												<div className="prize-triangle"/>
												抽&nbsp;&nbsp;奖
											</button>
										</div>
									)
								}else{
									return(
										<div
											key = {`footer${index}`}
											onClick = {this.navigate.bind(this,item.path)}
											className={active === item.active?"footer-row active":"footer-row"}>
											<img className="icon-class" src={active === item.active?item.activeIcon:item.img} alt=""/>
											<p>{item.name}</p>
										</div>
									)
								}
							})
						}
					</div>
				</div>
			</div>
		)
	}
}